<template>
  <el-dialog
    v-model="visible"
    title="岗位列表"
    width="80%"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div>
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchParams"
        class="demo-form-inline"
      >
        <el-form-item prop="buId">
          <el-select
            v-model="searchParams.buId"
            clearable
            placeholder="请输入申请部门"
            style="width: 240px"
          >
            <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="name">
          <el-input
            v-model="searchParams.name"
            placeholder="请输入需求岗位"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleSearch" />
        </el-form-item>
      </el-form>

      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        height="400"
      >
        <!-- 表格列保持原有结构 -->
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column
          prop="requireEmergencyLevel"
          label="岗位紧急程度"
          width="180"
        >
          <template v-slot="scope">
            <el-button
              type="primary"
              size="small"
              class="elTag"
              :color="
                scope.row.requireEmergencyLevel == 2
                  ? 'rgba(211, 0, 0)' // 非常紧急-颜色变浅
                  : scope.row.requireEmergencyLevel == 0
                  ? 'rgba(10, 90, 235)' // 一般-颜色变浅
                  : 'rgba(245, 154, 35)' // 紧急-颜色变浅
              "
            >
              {{
                scope.row.requireEmergencyLevel == 0
                  ? "一般"
                  : scope.row.requireEmergencyLevel == 1
                  ? "紧急"
                  : "非常紧急"
              }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="jobCode" label="岗位编号" />
        <el-table-column prop="jobName" label="岗位名称" />
        <el-table-column prop="requireProposerName" label="需求申请人" />
        <el-table-column prop="requireDeptName" label="需求部门" />
        <el-table-column prop="requirePersonNumber" label="需求人数" />
        <el-table-column prop="hopeArrivalTime" label="希望到岗日期" />
        <el-table-column prop="closeTime" label="截至日期" />
        <el-table-column prop="proposeTime" label="申请日期" />
      </el-table>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  getTalentPoolList,
  searchDepyList,
} from "@/api/recruitment/jobApplication";

const props = defineProps({
  departmentOptions: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["confirm"]);

const visible = ref(false);
const searchForm = ref(null);
const selectedData = ref([]);
const tableData = ref([]);

const searchParams = reactive({
  buId: "",
  name: "",
  status: 0,
});

// 初始化部门数据
const initDepartments = async () => {
  if (props.departmentOptions.length > 0) return;

  const { data } = await searchDepyList();
  props.departmentOptions = data.map((item) => ({
    label: item.deptName,
    value: item.deptId,
  }));
};

const loadTableData = async () => {
  try {
    const res = await getTalentPoolList(searchParams);

    console.log(res, "res.datares.data");
    tableData.value = res;
  } catch (error) {
    console.error("获取岗位列表失败:", error);
  }
};

const handleSearch = () => {
  loadTableData();
};

const handleSelectionChange = (selection) => {
  selectedData.value = selection;
};

const handleCancel = () => {
  visible.value = false;
  searchForm.value.resetFields();
};

const handleConfirm = () => {
  if (selectedData.value.length !== 1) {
    ElMessage.warning("请选择一条应聘岗位");
    return;
  }

  emit("confirm", selectedData.value[0]);
  handleCancel();
};

const open = async () => {
  await initDepartments();
  await loadTableData();
  visible.value = true;
};

defineExpose({ open });
</script>
